import { h, render } from 'vue'
import XtxMessage from './index.vue'
type ParamType = {
  type: 'success' | 'error' | 'warning' | 'info'
  message: string
  duration: number
}
// 自己创建一个盛放 消息提示的父容器, 并追加到body中
const messageContainer = document.createElement('div')
messageContainer.className = 'messageContainer'
document.body.appendChild(messageContainer)


function Message({ type, message, duration = 3000 }: ParamType) {
  const VNode = h(XtxMessage, { type, message, duration, key: +new Date() }) // 创建消息提示组件
  console.log(VNode)
  // 追加到messageContainer中
  render(VNode, messageContainer)
  // 等待一段时间,移除消息提示
  // setTimeout(() => {
  //   render(null, messageContainer)
  // }, 2000)
}
// 在Message上挂载了一下属性, 属性对应的值是方法
Message.success = (message: string, duration: number = 3000) => {
  Message({ type: 'success', message, duration })
}
Message.error = (message: string, duration: number = 3000) => {
  Message({ type: 'error', message, duration })
}
Message.warning = (message: string, duration: number = 3000) => {
  Message({ type: 'warning', message, duration })
}

Message.info = (message: string, duration: number = 3000) => {
  Message({ type: 'info', message, duration })
}


export default Message